<template>
    <div class="mydetail">
        <div class="mydetail-title">
            <p class="mydetail-title-p1"><span>{{item.county}}</span>{{item.title}}</p>
        </div>
        <div class="mydetail-full">
            <div class="mydetail-full-left">
                <img :src="item.image" alt="">
            </div>
            <div class="mydetail-full-right">
                <div class="mydetail-full-right-top">
                    <p>{{item.content}}</p>
                </div>
                <div class="mydetail-full-right-bottom">
                    <div>{{item.visit}}浏览</div>
                    <div>{{item.price}}元</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    item:{
        type:Object
    }
})
</script>

<style lang="scss" scoped>
.mydetail{
    width: 375px;
    display: flex;
    flex-direction: column;
    background-color: orange;
    &-title{
        width: 375px;
        &-p1{
            padding: 11px 56px 0px 15px;
            font-size: 20px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
    }
    &-full{
        display: flex;
        border-bottom: 1px solid gray;
        &-left{
            padding-left: 15px;
            img{
                width: 130px;
                height: 90px;
            }
        }
        &-right{
            flex: 1;
            &-top{
                width: 200px;
                height: 60px;
                font-size: 14px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 5px;
                padding-left: 15px;
                margin-top: -10px;
            }
            &-bottom{
                width: 200px;
                height: 20px;
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 15px;
                padding-top: 5px;
                img{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>